{extend name='base'}
{block name='content'}
<link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.8.2/video.js"></script>
<div class="video-main">
    {if $play!=""}
    <video
            id="my-video"
            class="video-js vjs-big-play-centered"
            controls
            preload="auto"
            width="1200"
            height="460"
            poster="{$project.pro_thumb}"
            data-setup="{}"
    >
        <source src="{$play.video_url}" />
    </video>
    <div class="video-cont">
        <div class="video-tit">
            <h4><strong>{$play.video_name}</strong></h4>
            <span><i class="iconfont">&#xe608;</i>{$project.pro_name}</span>
        </div>
        <div class="video-list">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" >简介</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" >目录</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" >
                    {:htmlspecialchars_decode($project.pro_content)}
                </div>
                <div class="tab-pane fade" id="profile" >
                    <ul>
                        {foreach $videoList as $v}
                        <li><i class="iconfont">&#xe637;</i><a href="">{$v.video_name}</a> <span class="video-time">{:date('Y_m-d',$project.pro_creat_time)}</span></li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    {else /}
        <div class="no-video">
            <h4>暂无视频课程....</h4>
        </div>
    {/if}
</div>

{/block}